<template>
  <div>
      <div class="container">
          <span :style="{'pointer-events': canClick}" class="btn-redirect" @click="redirect">点击进入<span>{{num}}</span></span>
      </div>
  </div>
</template>

<script>
export default {
    name: "Index",
    data() {
        return {
            canClick: 'none',
            num: 5
        }
    },
    methods: {
        redirect() {
            this.$router.push("/main")
        }
    },
    mounted() {
        setTimeout(() => {
            this.canClick = "auto"
        },3000) 

       var interval =  setInterval(() => {
            this.num -= 1

            if (this.num === 0) {
                this.num = ''
                clearInterval(interval)
            }
        }, 1000);
    }
}
</script>

<style scoped>
    .container {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: url('~@/assets/images/index.gif') center bottom no-repeat;
    }

    .btn-redirect {
        float: right;
        margin: 3px;
        padding: 3px 10px;
        background-color: #919191;
        border-radius: 3px;
        color: #fff;
        font-size: 12px;
    }
</style>